/**
 * Css Font Loading
 * CSS 允许开发者通过 “@font-face” 规则加载自定义的字体文件。
 * 这在 css 文件中很易用，但在脚本中动态使用起来就会很困难。
 * 进一步讲，css 允许用户代理在动态加载字体时作出选择，
 * 大多数用户代理，会选择不加载没有用到的字体文件，
 * 这意味着如果之后用动态引入新的字体会延迟生效，因为有下载和转化的时间花费。
 * Css Font Loading 标准定义了使用 CSS 字体的脚本接口，让脚本处理字体创建和加载更加轻松，
 * 并且提供方法跟踪单个或一组字体加载状态
 */

// 预先注册式的写法，@font-face 的应用
// document.styleSheets[0].insertRule(`
// @font-face{
//   font-family: 'Fira Code';
//   src: url('/fonts/FiraCode/eot/FiraCode-Light.eot');
//   src: url('/fonts/FiraCode/eot/FiraCode-Light.eot') format('embedded-opentype'),
//        url('/fonts/FiraCode/woff2/FiraCode-Light.woff2') format('woff2'),
//        url('/fonts/FiraCode/woff/FiraCode-Light.woff') format('woff'),
//        url('/fonts/FiraCode/ttf/FiraCode-Light.ttf') format('truetype');
//   font-weight: 300;
//   font-style: normal;
// }
// `, 0);

// document.body.style.fontFamily = 'Fira Code, serif';
// let preEles = document.querySelectorAll('pre');
// for(let i = 0; i < preEles.length; i += 1) {
//   preEles[i].style.fontFamily = 'Fira Code, serif';
// }

// 使用 FontFace 和 FontFaceSet 接口动态加载字体
/**
 * 这里的 FontFaceSet 接口被原生封装在 document.fonts 对象上
 */
let ffL = new FontFace('Fira Code', `
url('/fonts/FiraCode/eot/FiraCode-Light.eot');
url('/fonts/FiraCode/eot/FiraCode-Light.eot') format('embedded-opentype'),
url('/fonts/FiraCode/woff2/FiraCode-Light.woff2') format('woff2'),
url('/fonts/FiraCode/woff/FiraCode-Light.woff') format('woff'),
url('/fonts/FiraCode/ttf/FiraCode-Light.ttf') format('truetype');
`, {
  weight: 300,
  style: 'normal'
});
let ffR = new FontFace('Fira Code', `
url('/fonts/FiraCode/eot/FiraCode-Regular.eot');
url('/fonts/FiraCode/eot/FiraCode-Regular.eot') format('embedded-opentype'),
url('/fonts/FiraCode/woff2/FiraCode-Regular.woff2') format('woff2'),
url('/fonts/FiraCode/woff/FiraCode-Regular.woff') format('woff'),
url('/fonts/FiraCode/ttf/FiraCode-Regular.ttf') format('truetype');
`, {
  weight: 400,
  style: 'normal'
});
let ffM = new FontFace('Fira Code', `
url('/fonts/FiraCode/eot/FiraCode-Medium.eot');
url('/fonts/FiraCode/eot/FiraCode-Medium.eot') format('embedded-opentype'),
url('/fonts/FiraCode/woff2/FiraCode-Medium.woff2') format('woff2'),
url('/fonts/FiraCode/woff/FiraCode-Medium.woff') format('woff'),
url('/fonts/FiraCode/ttf/FiraCode-Medium.ttf') format('truetype');
`, {
  weight: 500,
  style: 'norma'
});
let ffB = new FontFace('Fira Code', `
url('/fonts/FiraCode/eot/FiraCode-Bold.eot');
url('/fonts/FiraCode/eot/FiraCode-Bold.eot') format('embedded-opentype'),
url('/fonts/FiraCode/woff2/FiraCode-Bold.woff2') format('woff2'),
url('/fonts/FiraCode/woff/FiraCode-Bold.woff') format('woff'),
url('/fonts/FiraCode/ttf/FiraCode-Bold.ttf') format('truetype');
`, {
  weight: 700,
  style: 'normal'
})

/**
 * FontFaceSet 接口还包括三个状态事件
 *  onloading: 当文档开始加载字体时触发
 *  onloaddone: 当文档加载完成并且成功时触发
 *  onloaderror: 当文档加载完成且加载失败时触发
 */
document.fonts.onloading = function (res) {
  console.log('loading', res);
}
document.fonts.onloadingdone = function (res) {
  console.log('loadingdone', res);
}
document.fonts.onloadingerror = function (res) {
  console.log('loadingerror', res);
}
// chrome 上似乎并未执行上面的事件监听

// 仅仅上面的代码，不会触发浏览器去加载相应的文件，
// 只有当 FontFace 实例对象 ff 被添加到 FontFaceSet 中，并且 document 中有 font-family 应用时才会触发加载。
// 而且用户代理会判断是否已经下载过当前字体，如果已经下载过是不会触发请求的。
document.fonts.add(ffL);
document.fonts.add(ffR);
document.fonts.add(ffM);
document.fonts.add(ffB);
// document.body.style.fontFamily = 'Fira Code, serif';
// 当然具有原生 font-family 的元素也要重写
// let preEles = document.querySelectorAll('pre');
// for(let i = 0; i < preEles.length; i += 1) {
//   preEles[i].style.fontFamily = 'Fira Code, serif';
// }

// 实际上，FontFace 和 FontFaceSet 有很多方法都是基于 Promise 的异步函数，便于我们控制流程
/**
 * 包括：FontFace 实例的 load()
 * FontFeacSet 实例的 load 方法和 ready 字段
 */

document.fonts.ready.then(function (res) {
  console.log('ready resolve', res);
  document.body.style.fontFamily = 'Fira Code, serif';
  let preEles = document.querySelectorAll('pre');
  for(let i = 0; i < preEles.length; i += 1) {
    preEles[i].style.fontFamily = 'Fira Code, serif';
  }
  let checkR = document.fonts.check('18px Fira Code', '===');
  console.log(checkR);
}, function (e) {
  console.error(e);
})

/**
 * CSS Font Loading 的兼容性不算好，但 Chrome 和 Safari 都实现了基础支持，
 * 移动 web 端可以在处理兼容的情况下尝试
 */